<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :show-pagination="false"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="addHandle">新增行业</el-button>
      </template>
      <template #industryImg="{row}">
        <el-image
          style="width: 100px; height: 100px"
          :src="row.industryImg"
          :preview-src-list="[row.industryImg]"
        />
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="editHandle(row)">编辑</el-button>
      </template>
    </pf-table>
    <add-industry
      v-if="showIndustry"
      :form-detail="detail"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { getIndustryList } from '@/api/dictionary'
import AddIndustry from './AddIndustry.vue'

export default {
  name: 'IndustryList',
  components: {
    AddIndustry
  },
  data() {
    return {
      form: {},
      detail: {},
      showIndustry: false,
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '行业名称', prop: 'industryName', attrs },
        { label: '行业排序', prop: 'industrySort', attrs },
        { label: '产品版本', prop: 'productTypeStr', attrs },
        { label: '行业图片', slot: 'industryImg', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '行业名称',
          prop: 'industryName'
        }
      ]
    }
  },

  methods: {
    getTableData({ ...formQuery }, done) {
      this.loading = true
      const data = {
        ...formQuery
      }
      getIndustryList(data).then(res => {
        this.loading = false
        done({ data: res || [] })
      }).catch(() => {
        done({ data: [] })
        this.loading = false
      })
    },

    // 新增
    addHandle() {
      this.detail = {}
      this.showIndustry = true
    },

    // 编辑
    editHandle(row) {
      this.detail = row
      this.showIndustry = true
    },

    // 关闭弹窗
    closeHandle() {
      this.showIndustry = false
    },

    // 确定
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
